<script lang="ts" setup>
import type { Course01ComponentMeta } from '@/definitions/type'
import { type Course01Item, ECourse01SortType, ECourse01Source } from '@/api/designer/model'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore, useInstStore } from '@/stores'
import { computed } from 'vue'
import './RenderCourse01.less'

interface RenderedCourse {
  category: number
  courses: Course01Item[]
}
defineOptions({
  name: 'RenderCourse01',
})
const props = defineProps<{
  render: Course01ComponentMeta
}>()
const MAX_COURSES = 6
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
const instStore = useInstStore()
const recommendOption = {
  value: -1,
  label: '推荐',
}
const renderedCourses = computed<RenderedCourse[]>(() => {
  const result: RenderedCourse[] = []
  if (props.render.config.source === ECourse01Source.按分类读取) {
    if (props.render.config.isDisplayRecommend) {
      result.push({
        category: recommendOption.value,
        courses: (instStore.jumpData?.courseRecommends || []).slice(0, MAX_COURSES),
      })
    }
    const categorys = props.render.config.categorys || []
    categorys.forEach((category) => {
      const courses = props.render.config.courses!.filter(course => course.categoryId === category.value)
      if (courses.length > 0) {
        result.push({
          category: category.value,
          courses: courses.slice(0, MAX_COURSES),
        })
      }
    })
  }
  else if (props.render.config.source === ECourse01Source.按顺序读取) {
    // should be immutable
    const courses = (instStore.jumpData?.courses || []).concat()
    if (courses && courses.length > 0) {
      if (props.render.config.sortType === ECourse01SortType.权重倒序) {
        courses.sort((a, b) => b.weight - a.weight)
      }
      else if (props.render.config.sortType === ECourse01SortType.更新时间倒序) {
        courses.sort((a, b) => new Date(b.updateTime!).getTime() - new Date(a.updateTime!).getTime())
      }
    }
    result.push({
      // ignore
      category: -2,
      courses: courses.slice(0, MAX_COURSES),
    })
  }
  else if (props.render.config.source === ECourse01Source.自定义) {
    result.push({
      // ignore
      category: -3,
      courses: props.render.config.courses!.slice(0, MAX_COURSES),
    })
  }
  return result
})
const renderedCategorys = computed(() => {
  if (props.render.config.source !== ECourse01Source.按分类读取) {
    return []
  }
  const categorys = (props.render.config.categorys || []).concat()
  if (props.render.config.isDisplayRecommend) {
    // @ts-ignore
    categorys.unshift(recommendOption)
  }
  return categorys
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('main')">
      <!-- 类目列表 -->
      <div
        v-if="render.config.source === ECourse01Source.按分类读取 && renderedCategorys.length > 0"
        :class="prefix('categorys')"
      >
        <div
          v-for="(item, index) in renderedCategorys" :key="item.value"
          :class="[prefix('category'), index === 0 ? prefix('category-current') : '']"
          :data-category="`${render.id!}_${item.value}`"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 课程列表 -->
      <div
        v-for="(item, index) in renderedCourses" :key="item.category"
        :class="[prefix('courses'), index === 0 ? prefix('courses-current') : '', `${render.id!}_${item.category}`]"
      >
        <a v-for="course of item.courses" :key="course.id" :class="prefix('course')" target="_blank" :href="course.url">
          <div :class="prefix('cover-wrap')">
            <img :src="course.pic" :class="prefix('cover')">
          </div>
          <div :class="prefix('info')">
            <div :class="prefix('title')">
              {{ course.name }}
            </div>
            <div v-if="render.config.isDisplayDescription" :class="prefix('desc')">
              {{ course.desc }}
            </div>
            <div :class="prefix('extra')">
              <div :class="prefix('price')">{{ course.price }}</div>
              <div :class="prefix('views')">{{ course.viewCount }}人看过</div>
            </div>
          </div>
        </a>
      </div>
      <!-- 更多课程按钮 -->
      <a v-if="render.config.buttonUrl" :class="prefix('more-btn')" target="_blank" :href="render.config.buttonUrl">
        {{ render.config.buttonText || '更多课程' }}
      </a>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('main')">
      <!-- 类目列表 -->
      <div
        v-if="render.config.source === ECourse01Source.按分类读取 && renderedCategorys.length > 0"
        :class="prefix('categorys')"
      >
        <div
          v-for="(item, index) in renderedCategorys" :key="item.value"
          :class="[prefix('category'), index === 0 ? prefix('category-current') : '']"
          :data-category="`${render.id!}_${item.value}`"
        >
          {{ item.label }}
        </div>
      </div>
      <!-- 课程列表 -->
      <div
        v-for="(item, index) in renderedCourses" :key="item.category"
        :class="[prefix('courses'), index === 0 ? prefix('courses-current') : '', `${render.id!}_${item.category}`, (item.courses.length === 3 || item.courses.length > 4) ? prefix('courses-maxcol3') : prefix('courses-maxcol2')]"
      >
        <a v-for="course of item.courses" :key="course.id" :class="prefix('course')" target="_blank" :href="course.url">
          <div :class="prefix('cover-wrap')">
            <img :src="course.pic" :class="prefix('cover')">
          </div>
          <div :class="prefix('info')">
            <div :class="prefix('title')">
              {{ course.name }}
            </div>
            <div v-if="render.config.isDisplayDescription" :class="prefix('desc')">
              {{ course.desc }}
            </div>
            <div :class="prefix('extra')">
              <div :class="prefix('price')">{{ course.price }}</div>
              <div :class="prefix('views')">{{ course.viewCount }}人看过</div>
            </div>
          </div>
        </a>
      </div>
      <!-- 更多课程按钮 -->
      <a v-if="render.config.buttonUrl" :class="prefix('more-btn')" target="_blank" :href="render.config.buttonUrl">
        {{ render.config.buttonText }}
      </a>
    </div>
  </div>
</template>
